<template>
  <view>
    <view class="container">
      <view class="table-view">
        <!-- <view class="title">账单明细</view> -->
        <view class="date-row">
          <view class="left">
            <picker mode="date" fields="month" @change="onDateChange">
              {{ date.format("yyyy年MM月") }}
              <uni-icons type="bottom"></uni-icons>
            </picker>
          </view>
          <view class="right">
            <view class="item">收入：¥2839.00</view>
            <view class="item">提现：¥2839.00</view>
          </view>
        </view>
        <view class="item-row" v-for="i in 10" :key="i">
          <view class="left">
            <view class="name">订单到账</view>
            <view class="date">2023-09-18 11:00:00</view>
          </view>
          <view class="right sub-text">+800.00</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      date: null,
    };
  },
  onLoad() {
    this.date = new Date();
  },
  methods: {
    onDateChange(e) {
      console.log(e);
      this.date = new Date(e.detail.value);
    },
  },
};
</script>

<style>
page {
  background: white;
}
</style>
<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
}

.table-view {
  width: 100%;
  display: flex;
  flex-direction: column;
  background: white;
  padding: 40rpx;
  box-sizing: border-box;
  .title {
    color: #232323;
    font-size: 32rpx;
    font-weight: 600;
  }
  .date-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 32rpx;
    .left {
      font-size: 36rpx;
      color: #232323;
      display: flex;
      align-items: center;
    }
    .right {
      display: flex;
      align-items: center;
      .item {
        margin-left: 24rpx;
        color: #232323;
        font-size: 24rpx;
      }
    }
  }

  .item-row {
    min-height: 146rpx;
    border-bottom: solid 2rpx #f8f8f8;
    display: flex;
    align-items: center;
    .left {
      flex: 1;
      .name {
        color: #232323;
        font-size: 32rpx;
        font-weight: 400;
      }
      .date {
        color: rgba(35, 35, 35, 0.5);
        font-size: 24rpx;
        font-weight: 400;
        margin-top: 10rpx;
      }
    }
    .right {
      font-size: 36rpx;
      font-weight: 500;
    }
    .add-text {
      color: #2eb0d9;
    }
    .sub-text {
      color: #232323;
    }
  }
}
</style>
